<template>
    <div class="model-child">
        <div class="model">
            <div class="model-title">
                <h2>园区产品注册数量排行</h2>
            </div>
            <div class="model-echart">
                <div id="parktop"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { getProductRanking } from '@/api/park.js'

export default {
    data() {
        return {
            form: {
                year: ''
            },
            echartPieData: {
                x: [],
                y: []
            },
            echartBarData: {
                x: [],
                y: []
            },
            parktopBarChart: '',
            parklistPieChart: '',
        }
    },
    methods: {
        //全国--园区数量排名
        async getPartCount(form) {
            if (form.year == '') return
            const res = await getProductRanking({
                year: form.year
            })
            let x = [], y = [];
            res.map((e, index) => {
                x.push(e.counts)
                y.push(e.type)
            })
            this.echartPieData.x = x
            this.echartPieData.y = y
            if (this.parktopBarChart != '') {
                let objs = {
                    xAxisData: this.echartPieData.y,
                    seriesData: this.echartPieData.x
                }
                this.parktopBarChart.clear();
                this.parktopBarChart.setOption(this.$lib.acrossChart(objs));
                this.parktopBarChart.resize();
            } else {
                this.initECharBar()
            }
        },
        initECharBar() {
            let objs = {
                xAxisData: this.echartPieData.y,
                seriesData: this.echartPieData.x
            }
            this.parktopBarChart = this.$echarts.init(document.getElementById('parktop'));
            this.parktopBarChart.setOption(this.$lib.acrossChart(objs));
            window.onresize = () => {
                this.parktopBarChart.resize();
            }
        }
    },
    watch: {
        '$store.state.app.year': {
            handler: function (nVal, oVal) {
                this.form.year = nVal
                this.getPartCount(this.form)
            },
            immediate: true
        }

    }
}
</script>
<style scoped lang="scss">
    .model-child {
        display: flex;
        margin: 1vw 0;

        .model {
            flex: 1;
        }
    }

    .model {
        padding: .4vw;
        background: url('../../assets/x1/modal_2_header.png') no-repeat top left, url('../../assets/x1/modal_2_footer.png') no-repeat bottom left;
        background-size: 100% auto;
    }

    #parktop, #parkList {
        width: 100%;
        height: 27vw;
    }

    .model-title {
        padding: screenVw(1) 0 0;

        h2 {
            text-align: center;
            color: #78dffd;
            font-size: screenVw(1.2);
        }
    }

    .model-echart {
        display: flex;
        padding: screenVw(0.5) 0;

        div {
            flex: 1;
        }
    }
</style>
